<template>
  <div class="mod-demo-echarts">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <el-button size="small" id="button" round @click="recentSevenDay(6)">近7日</el-button>
          <el-button size="small" id="button1" round @click="recentSevenDay(30)">近30日</el-button>
          <div id="J_chartLineBox" class="chart-box" style="margin-top: 20px;"></div>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card>
          <div id="J_chartBarBox" class="chart-box"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
// import echarts from 'echarts'
import { method } from 'lodash'
export default {
  data() {
    return {
      dateList: [],
      userList: [],
      subjectData:[],
      chartLine: null,
      chartBar: null,
    }
  },
  mounted() {
    this.recentSevenDay(6)
    this.subjectNum()
    this.initChartLine()
    this.initChartBar()


  },
  activated() {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.chartLine) {
      this.chartLine.resize()
    }
    if (this.chartBar) {
      this.chartBar.resize()
    }
  },
  methods: {
    //近7/30日
    recentSevenDay(n) {
      // 获取当前时间
      const dayjs = require('dayjs')
      const td = dayjs().format('YYYY-MM-DD')    //获取当前时间

      const endDate = dayjs().subtract(0, 'day').format('YYYY-MM-DD')   

      const startDate = dayjs().subtract(n, 'day').format('YYYY-MM-DD')    

      this.$http({
        url: this.$http.adornUrl('/report/turnoverStatistics'),
        method: 'get',
        params: this.$http.adornParams({
          'startDate': startDate,
          'endDate': endDate,
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log(data),
            this.dateList = data.data.dateList,
            console.log(this.dateList),
            this.userList = data.data.userList
          console.log(this.userList)

          // 数据加载完成后初始化图表
          this.initChartLine();
          this.initChartBar();

        } else {
          this.dateList = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            this.userList = [1, 2, 3, 4, 5, 6, 7]
          // 数据加载完成后初始化图表
          this.initChartLine();
          this.initChartBar();
        }

      })
      // alert(startDate+"  "+endDate)
    },

    subjectNum(){
          this.$http({
        url: this.$http.adornUrl('/report/statisticsForCircle'),
        method: 'get',
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log(data),
            this.subjectData = data.data

          // 数据加载完成后初始化图表
          this.initChartLine();
          this.initChartBar();

        } else {
          this.subjectData = [{value:1,name:"数据获取失败"}],
          // 数据加载完成后初始化图表
          this.initChartLine();
          this.initChartBar();
        }

      })

    },

    // 折线图
    initChartLine() {
      var option = {
        title: {
          text: '用户活跃统计',
        },
        xAxis: {
          type: 'category',
          name: '日期',
          data: this.dateList
        },
        yAxis: {
          type: 'value',
          name: "数量"
        },
        series: [
          {
            data: this.userList,
            type: 'line',
            smooth: true
          }
        ]
      };
      this.chartLine = echarts.init(document.getElementById('J_chartLineBox'))
      this.chartLine.setOption(option)
      window.addEventListener('resize', () => {
        this.chartLine.resize()
      })
    },
    // 饼状图
    initChartBar() {
      var option = {
        title: {
          text: '学科数量统计',
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '学科',
            type: 'pie',
            radius: '70%',
            data: this.subjectData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      this.chartBar = echarts.init(document.getElementById('J_chartBarBox'))
      this.chartBar.setOption(option)
      window.addEventListener('resize', () => {
        this.chartBar.resize()
      })
    },
  }
}
</script>

<style lang="scss">
.mod-demo-echarts {
  >.el-alert {
    margin-bottom: 10px;
  }

  >.el-row {
    margin-top: -10px;
    margin-bottom: -10px;

    .el-col {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }
  .chart-box {
    min-height: 400px;
  }

}
</style>
